<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width: 180rpx;">{{
							$t('smashRemoval.completionStatus') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.selectList"
								:placeholder="$t('distributedOut.placeholder')" :isJSON="true" keyName="name"
								@select="select" v-model="data.selectText" :defaultValue="$t('smashRemoval.all')">
							</superweiCombox>
						</view>
					</view>
					<view class="gui-form-item gui-border-b" style="padding:10rpx 0;">
						<text class="gui-form-label gui-secondary-text" style="width: 180rpx;">{{
							$t('fixedAssets.scanningCard') }}</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.scanValue"
							:placeholder="$t('stockManage.pleaseScanCode')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
					<view class="custom-form-card" v-for="(item, index) in data.list"
						:key="`${item.materialCode}` + `${index}`">
						<uni-collapse v-model="data.value">
							<uni-collapse-item titleBorder="true" :show-animation="true" :name="'' + index">
								<template v-slot:title>
									<view class="custom-card-itemOne" style="height:80rpx">
										<text class="flex-1">
											<text class="item-info-title">{{ $t('fixedAssets.cardNo')
												}}：</text>
											{{ item.cardCode }}
											<uni-tag style="margin-left: 20rpx;" :mark="true"
												:text="$t('finishInventory.checked')" type="primary" size="default"
												v-if="item.ckeckFlag == 'Y'" />
											<uni-tag style="margin-left: 20rpx;" :mark="true"
												:text="$t('finishInventory.unchecked')" size="default" v-else />
										</text>
									</view>
								</template>
								<view class="content">
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('fixedAssets.assetType') }}：</text>{{
											item.assetClass }}
									</view>
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('fixedAssets.assetName') }}：</text>{{
											item.assetName }}
									</view>
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('fixedAssets.purchaseDate') }}：</text>{{
											item.specification }}
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50">
											<text class="item-info-title">{{ $t('fixedAssets.warrantyPeriod') }}：</text>
											<uni-tag :text="item.mesQty || '0'" />
										</view>
										<view class="card-item-50">
											<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{item.unit }}
											
										</view>
									</view>
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('pageTranslation.checkQty') }}：</text>
										<uni-tag :text="item.checkQty || '0'" type="success" />
									</view>
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('fixedAssets.assetNo') }}：</text>{{
											item.assetCode }}
									</view>
									<view class="custom-card-itemOne">
										<text class="item-info-title">{{ $t('fixedAssets.startUse') }}：</text>{{
											item.startDate }}
									</view>
									<!-- <view class="divider"></view>
									<view class="custom-card-itemOne">
										<view style="margin-left: 73%;margin-bottom:20rpx;">
											<view class="btnCancel" v-if="item.ckeckFlag == 'Y'"
												@click="HandUnCheckPda(item)">
												{{ $t('finishInventory.cancel') }}
											</view>
											<view class="btnPanDian" v-else @click="assetsCheck(item)">
												{{ $t('finishInventory.check') }} </view>
										</view>
									</view> -->
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import {onShow, onHide} from '@dcloudio/uni-app';
import searchCustom from '@/components/searchCustom';
import calendarCustom from '@/components/calendarCustom';
import superweiCombox from '@/components/superweiCombox';
import openView from '@/components/common/openView';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_LOOK } from '@/constant/index.js'
import { getAssetCardCheckStockDetailList } from '@/api/api.js'
import { useI18n } from 'vue-i18n';
import { useStore } from "vuex";

let store = useStore();
const { t } = useI18n();

components: {
	searchCustom,
		superweiCombox,
		calendarCustom,
		openView
}

// 接受来自父组件的传参 页面传值
const props = defineProps({
	billid: String,
	billCode: String,
});


let fromData = reactive({
	page: 1,
	rows: 10,
});
let data = reactive({
	selectId: '',
	selectText: t('smashRemoval.all'),
	selectList: [{
		id: '',
		name: t('smashRemoval.all')
	}, {
		id: 'N',
		name: t('finishInventory.unchecked')
	}, {
		id: 'Y',
		name: t('finishInventory.checked')
	}],
	list: [],
	value: ['0'], //card的展开
	id: props.billid, // 界面传值的id
	billCode: props.billCode, // 界面传值的id
	noticeHooks: false, //暂无相关数据标识
})

onShow(() => {
	const pages = getCurrentPages();
	if (pages[pages.length - 1].route === '/pages/fixedAssets/fixedAssetsRecord') {
		uni.$on('scancodedate', (data) => {
		console.log('获取到的code：' + data.code)
		getCode(data.code, 'pda')
	    })
	}
	requestData()
})

onHide(()=>{
	uni.$off("scancodedate")
})

onMounted(() => {
	// uni.$on('scancodedate', (data) => {
	// 	console.log('获取到的code：' + data.code)
	// 	getCode(data.code, 'pda')
	// })
	// requestData()
})
// 校验状态的选择事件
const select = (e) => {
	data.selectId = e.id;
	requestData()
}
//上拉加载
const scrolltolower = () => {
	// data.noticeHooks  上拉的时候已经没有数据  不请求接口
	if (!data.noticeHooks) {
		fromData.page++
		requestData()
	}
}
// 拉取当前盘点的所有数据
const requestData = () => {
	let parmes = {
		current: fromData.page,
		size: fromData.rows,
		headerId: data.id, // 盘点单ID
		cardCode: data.scanValue,
		ckeckFlag: data.selectId
	}
	getAssetCardCheckStockDetailList(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '固资盘点'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code,//返回状态
				errorMessage: res.msg,//错误信息
				isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_LOOK,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		console.log(res)
		if (res.code == 0) {
			data.noticeHooks = false
			// 根据接口返回设计上拉加载相应判断
			if (fromData.page === 1) {
				if (res.data.records.length == 0) {
					data.noticeHooks = true
				}
				data.list = res.data.records
			} else {
				data.list = [...data.list, ...res.data.records]
			}
			data.list?.forEach((item, index) => {
				if (index !== 0) {
					data.value.push('' + index)
				}
			})
			data.noticeHooks = data.list.length >= res.data.total
		} else {
			uni.showToast({ title: res.msg, icon: "none" });
		}
	})
}

// 用户调起相机扫码
const iconClick = async (type) => {
	if (type === 'suffix') {
		let code = await scan()
		getCode(code, 'scan')
	}
}
// 用户点击键盘上搜索
const confirm = () => {
	getCode(data.scanValue, 'keydown')
}
// 获取code
const getCode = (code, type) => {
	data.scanValue = code

	requestData()
}
</script>

<style lang="scss" scoped>
.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.card-box {
	margin: 0 15rpx;
	box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
	background: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
}

.card-item {
	line-height: 60rpx;
}

.card-bottom {
	margin-bottom: 30rpx;
}

.filtrate-item {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	margin-bottom: 20rpx;

	.filtrate-itemLeft {
		height: 32rpx;
		line-height: 32rpx;
		width: 100rpx;
	}

	.filtrate-itemRight {
		border: 2rpx solid #A5A5A5;
		border-radius: 8rpx;
		overflow: hidden;
		line-height: 40rpx;
		width: 300rpx;
	}
}

// 展开按钮样式
.card-rotating-top {
	margin-top: 10rpx;
}

.card-selectCustom {
	margin: 0.46875rem 0.625rem;
	box-shadow: 0 0 0.125rem 0 #a5a5a5;
	background: #fff;
	padding: 0.375rem 0.75rem;
	border-radius: 0.5rem;
	position: relative;
	height: 70rpx;
}

.btnCancel {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: #f08d49;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}

.btnPanDian {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: #42b983;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}
</style>
